<template>
  <div class="data-recognition-container">
    <div class="header">
      <h1>数据表征识别</h1>
      <p>上传数据文件，分析关键参数变化趋势</p>
    </div>

    <div class="control-panel">
      <el-upload
          class="upload-demo"
          action=""
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleFileChange"
      >
        <template #trigger>
          <el-button type="primary" class="control-btn">
            <i class="el-icon-upload"></i> 导入数据文件
          </el-button>
        </template>
      </el-upload>

      <el-button
          type="success"
          class="control-btn"
          :disabled="!fileLoaded"
          @click="analyzeData"
      >
        <i class="el-icon-cpu"></i> 执行表征识别
      </el-button>

      <el-button
          type="info"
          class="control-btn"
          @click="resetAll"
      >
        <i class="el-icon-refresh"></i> 重置
      </el-button>
    </div>

    <div v-if="fileLoaded" class="data-preview">
      <h3>数据预览 (前{{ Math.min(parsedData.length, 5) }}行)</h3>
      <div class="preview-table">
        <div v-for="(item, index) in parsedData.slice(0, 5)" :key="index" class="preview-row">
          <div class="time-cell">{{ item.time.toFixed(5) }}</div>
          <div class="data-cell">
            <span v-for="(value, key) in item" :key="key" v-if="key !== 'time'">
              <span class="data-key">{{ key }}:</span>
              <span class="data-value">{{ value }}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="analysisStarted" class="data-structure-section">
      <h3>数据结构分析</h3>
      <div class="structure-container">
        <div class="field-table">
          <el-table :data="fieldInfo" style="width: 100%" height="350">
            <el-table-column prop="field" label="字段名" width="150" />
            <el-table-column prop="type" label="数据类型" width="120" />
            <el-table-column prop="value" label="示例值" />
          </el-table>
        </div>
        <div class="raw-data">
          <h4>原始数据 (前10行)</h4>
          <el-input
              type="textarea"
              :rows="10"
              readonly
              :value="rawDataPreview"
              resize="none"
              class="raw-textarea"
          />
        </div>
      </div>
    </div>

    <div v-show="analysisStarted" class="results-section">
      <div class="chart-row">
        <div class="chart-container">
          <h3>飞行轨迹 (经度 vs 纬度)</h3>
          <div ref="trajectoryChart" class="chart"></div>
        </div>

        <div class="chart-container">
          <h3>高度变化</h3>
          <div ref="heightChart" class="chart"></div>
        </div>
      </div>

      <div class="chart-row">
        <div class="chart-container">
          <h3>速度变化</h3>
          <div ref="velocityChart" class="chart"></div>
        </div>

        <div class="chart-container">
          <h3>航向角变化</h3>
          <div ref="headingChart" class="chart"></div>
        </div>
      </div>

      <div class="chart-row">
        <div class="chart-container">
          <h3>姿态角变化</h3>
          <div ref="attitudeChart" class="chart"></div>
        </div>

        <div class="chart-container">
          <h3>速度分量</h3>
          <div ref="velocityComponentsChart" class="chart"></div>
        </div>
      </div>
    </div>

    <div v-show="analysisStarted" class="stats-section">
      <h3>数据统计摘要</h3>
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-value">{{ parsedData.length }}</div>
          <div class="stat-label">数据点总数</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">{{ timeRange.toFixed(2) }}秒</div>
          <div class="stat-label">时间范围</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">{{ avgSpeed.toFixed(1) }} m/s</div>
          <div class="stat-label">平均速度</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">{{ avgHeight.toFixed(0) }}米</div>
          <div class="stat-label">平均高度</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, nextTick} from 'vue'
import * as echarts from 'echarts'
import { ElButton, ElUpload } from 'element-plus'
import 'element-plus/es/components/button/style/css'
import 'element-plus/es/components/upload/style/css'

// 响应式数据
const fileLoaded = ref(false)
const analysisStarted = ref(false)
const parsedData = ref([])
const timeRange = ref(0)
const avgSpeed = ref(0)
const avgHeight = ref(0)

// ECharts图表引用
const trajectoryChart = ref(null)
const heightChart = ref(null)
const velocityChart = ref(null)
const headingChart = ref(null)
const attitudeChart = ref(null)
const velocityComponentsChart = ref(null)

// 图表实例
let trajectoryChartInstance = null
let heightChartInstance = null
let velocityChartInstance = null
let headingChartInstance = null
let attitudeChartInstance = null
let velocityComponentsChartInstance = null
// 新增的响应式数据
const rawDataPreview = ref('')
const fieldInfo = ref([])

// 修改后的处理文件上传方法
const handleFileChange = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    parseData(e.target.result)
    // 提取原始数据的前10行
    rawDataPreview.value = e.target.result.split('\n').slice(0, 10).join('\n')
    fileLoaded.value = true
    analysisStarted.value = false

    // 生成字段信息
    generateFieldInfo()
  }
  reader.readAsText(file.raw)
}

// 新增方法：生成字段信息
const generateFieldInfo = () => {
  if (parsedData.value.length === 0) return

  const sample = parsedData.value[0]
  fieldInfo.value = []

  for (const key in sample) {
    if (sample.hasOwnProperty(key)) {
      let value = sample[key]
      let type = typeof value

      // 特殊处理时间字段
      if (key === 'time') {
        type = '时间戳'
        value = value.toFixed(5)
      }
      // 特殊处理坐标字段
      else if (key === 'lon' || key === 'lat') {
        type = '地理坐标'
        value = value.toFixed(6)
      }
      // 特殊处理高度字段
      else if (key === 'hei') {
        type = '高度'
        value = value.toFixed(1) + '米'
      }
      // 特殊处理速度字段
      else if (key === 'vel') {
        type = '速度'
        value = value.toFixed(1) + 'm/s'
      }
      // 特殊处理角度字段
      else if (key.includes('head') || key.includes('elev') || key.includes('roll')) {
        type = '角度'
        value = value.toFixed(1) + '°'
      }
      // 特殊处理速度分量
      else if (key.startsWith('v')) {
        type = '速度分量'
        value = value.toFixed(1) + 'm/s'
      }
      // 默认处理
      else {
        type = typeof value
        // 如果是数字且是整数
        if (Number.isInteger(value)) {
          value = value.toString()
        }
        // 如果是浮点数
        else if (typeof value === 'number') {
          value = value.toFixed(4)
        }
      }

      fieldInfo.value.push({
        field: key,
        type: type,
        value: value
      })
    }
  }
}

// 解析数据
const parseData = (data) => {
  const lines = data.trim().split('\n')
  parsedData.value = []

  lines.forEach(line => {
    const parts = line.trim().split(/\s+/)
    if (parts.length < 2) return

    const dataPoint = { time: parseFloat(parts[0]) }

    for (let i = 1; i < parts.length; i++) {
      const [key, value] = parts[i].split('=')
      dataPoint[key] = parseFloat(value)
    }

    parsedData.value.push(dataPoint)
  })

  // 计算时间范围
  if (parsedData.value.length > 0) {
    timeRange.value = parsedData.value[parsedData.value.length - 1].time - parsedData.value[0].time
  }
}
const resizes = ()=>{
  nextTick(()=>{
    trajectoryChartInstance.resize()
    heightChartInstance.resize()
    velocityChartInstance.resize()
    headingChartInstance.resize()
    attitudeChartInstance.resize()
    velocityComponentsChartInstance.resize()
  })
}

// 执行数据分析
const analyzeData = () => {
  if (parsedData.value.length === 0) return

  analysisStarted.value = true

  // 计算统计数据
  let totalSpeed = 0
  let totalHeight = 0
  parsedData.value.forEach(point => {
    totalSpeed += point.vel
    totalHeight += point.hei
  })
  avgSpeed.value = totalSpeed / parsedData.value.length
  avgHeight.value = totalHeight / parsedData.value.length

  // 渲染图表
  renderCharts()
  resizes()
}

// 渲染所有图表
const renderCharts = () => {
  renderTrajectoryChart()
  renderHeightChart()
  renderVelocityChart()
  renderHeadingChart()
  renderAttitudeChart()
  renderVelocityComponentsChart()
}

// 渲染轨迹图
// 渲染轨迹图
const renderTrajectoryChart = () => {
  if (!trajectoryChart.value) return

  trajectoryChartInstance = echarts.init(trajectoryChart.value, 'dark')

  // 提取时间和经纬度数据
  const timeData = parsedData.value.map(point => point.time)
  const lonData = parsedData.value.map(point => point.lon)
  const latData = parsedData.value.map(point => point.lat)

  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        const time = params[0].axisValue
        const lon = params[0].data
        const lat = params[1].data
        const point = parsedData.value.find(p => p.time === time) || parsedData.value[0]
        return `
          时间: ${time.toFixed(5)}s<br>
          经度: ${lon.toFixed(6)}<br>
          纬度: ${lat.toFixed(6)}<br>
          高度: ${point.hei}m
        `
      }
    },
    legend: {
      data: ['经度', '纬度'],
      textStyle: {
        color: '#ddd'
      },
      bottom: 0
    },
    xAxis: {
      type: 'category',
      name: '时间 (s)',
      data: timeData,
      axisLine: {
        lineStyle: {
          color: '#aaa'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '坐标值',
      axisLine: {
        lineStyle: {
          color: '#aaa'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(100, 100, 150, 0.2)'
        }
      }
    },
    series: [
      {
        name: '经度',
        type: 'line',
        data: lonData,
        symbol: 'none',
        lineStyle: {
          width: 2,
          color: '#5470c6'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(84, 112, 198, 0.5)' },
            { offset: 1, color: 'rgba(84, 112, 198, 0.1)' }
          ])
        }
      },
      {
        name: '纬度',
        type: 'line',
        data: latData,
        symbol: 'none',
        lineStyle: {
          width: 2,
          color: '#91cc75'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(145, 204, 117, 0.5)' },
            { offset: 1, color: 'rgba(145, 204, 117, 0.1)' }
          ])
        }
      }
    ],
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        type: 'slider',
        show: true,
        start: 0,
        end: 100,
        backgroundColor: 'rgba(30, 35, 70, 0.5)',
        borderColor: 'rgba(64, 92, 200, 0.3)',
        fillerColor: 'rgba(64, 92, 200, 0.2)',
        textStyle: {
          color: '#ddd'
        }
      }
    ]
  }

  trajectoryChartInstance.setOption(option)
}

// 渲染高度图
const renderHeightChart = () => {
  if (!heightChart.value) return

  heightChartInstance = echarts.init(heightChart.value, 'dark')

  const timeData = parsedData.value.map(point => point.time)
  const heightData = parsedData.value.map(point => point.hei)

  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: timeData,
      name: '时间 (s)',
      axisLine: {
        lineStyle: {
          color: '#aaa'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '高度 (m)',
      axisLine: {
        lineStyle: {
          color: '#aaa'
        }
      }
    },
    series: [{
      data: heightData,
      type: 'line',
      smooth: true,
      symbol: 'none',
      lineStyle: {
        width: 3,
        color: '#91cc75'
      }
    }],
    tooltip: {
      trigger: 'axis'
    }
  }

  heightChartInstance.setOption(option)
}

// 渲染速度图
const renderVelocityChart = () => {
  if (!velocityChart.value) return

  velocityChartInstance = echarts.init(velocityChart.value, 'dark')

  const timeData = parsedData.value.map(point => point.time)
  const velocityData = parsedData.value.map(point => point.vel)

  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: timeData,
      name: '时间 (s)',
      axisLine: {
        lineStyle: {
          color: '#aaa'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '速度 (m/s)',
      axisLine: {
        lineStyle: {
          color: '#aaa'
        }
      }
    },
    series: [{
      data: velocityData,
      type: 'line',
      smooth: true,
      symbol: 'none',
      lineStyle: {
        width: 3,
        color: '#ee6666'
      }
    }],
    tooltip: {
      trigger: 'axis'
    }
  }

  velocityChartInstance.setOption(option)
}

// 渲染航向角图
const renderHeadingChart = () => {
  if (!headingChart.value) return

  headingChartInstance = echarts.init(headingChart.value, 'dark')

  const timeData = parsedData.value.map(point => point.time)
  const headingData = parsedData.value.map(point => point.head)

  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: timeData,
      name: '时间 (s)',
      axisLine: {
        lineStyle: {
          color: '#aaa'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '航向角 (°)',
      axisLine: {
        lineStyle: {
          color: '#aaa'
        }
      }
    },
    series: [{
      data: headingData,
      type: 'line',
      smooth: true,
      symbol: 'none',
      lineStyle: {
        width: 3,
        color: '#73c0de'
      }
    }],
    tooltip: {
      trigger: 'axis'
    }
  }

  headingChartInstance.setOption(option)
}

// 渲染姿态角图
const renderAttitudeChart = () => {
  if (!attitudeChart.value) return

  attitudeChartInstance = echarts.init(attitudeChart.value, 'dark')

  const timeData = parsedData.value.map(point => point.time)
  const elevData = parsedData.value.map(point => point.elev)
  const rollData = parsedData.value.map(point => point.roll)

  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: timeData,
      name: '时间 (s)',
      axisLine: {
        lineStyle: {
          color: '#aaa'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '角度 (°)',
      axisLine: {
        lineStyle: {
          color: '#aaa'
        }
      }
    },
    legend: {
      data: ['俯仰角', '滚转角'],
      textStyle: {
        color: '#ddd'
      }
    },
    series: [
      {
        name: '俯仰角',
        data: elevData,
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
          width: 2,
          color: '#fc8452'
        }
      },
      {
        name: '滚转角',
        data: rollData,
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
          width: 2,
          color: '#9a60b4'
        }
      }
    ],
    tooltip: {
      trigger: 'axis'
    }
  }

  attitudeChartInstance.setOption(option)
}

// 渲染速度分量图
const renderVelocityComponentsChart = () => {
  if (!velocityComponentsChart.value) return

  velocityComponentsChartInstance = echarts.init(velocityComponentsChart.value, 'dark')

  const timeData = parsedData.value.map(point => point.time)
  const vxData = parsedData.value.map(point => point.vx)
  const vyData = parsedData.value.map(point => point.vy)
  const vzData = parsedData.value.map(point => point.vz)

  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: timeData,
      name: '时间 (s)',
      axisLine: {
        lineStyle: {
          color: '#aaa'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '速度分量 (m/s)',
      axisLine: {
        lineStyle: {
          color: '#aaa'
        }
      }
    },
    legend: {
      data: ['Vx', 'Vy', 'Vz'],
      textStyle: {
        color: '#ddd'
      }
    },
    series: [
      {
        name: 'Vx',
        data: vxData,
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
          width: 2,
          color: '#5470c6'
        }
      },
      {
        name: 'Vy',
        data: vyData,
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
          width: 2,
          color: '#91cc75'
        }
      },
      {
        name: 'Vz',
        data: vzData,
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
          width: 2,
          color: '#fac858'
        }
      }
    ],
    tooltip: {
      trigger: 'axis'
    }
  }

  velocityComponentsChartInstance.setOption(option)
}

// 重置所有数据
const resetAll = () => {
  fileLoaded.value = false
  analysisStarted.value = false
  parsedData.value = []
  timeRange.value = 0
  avgSpeed.value = 0
  avgHeight.value = 0

  // 销毁所有图表实例
  if (trajectoryChartInstance) {
    trajectoryChartInstance.dispose()
    trajectoryChartInstance = null
  }
  if (heightChartInstance) {
    heightChartInstance.dispose()
    heightChartInstance = null
  }
  if (velocityChartInstance) {
    velocityChartInstance.dispose()
    velocityChartInstance = null
  }
  if (headingChartInstance) {
    headingChartInstance.dispose()
    headingChartInstance = null
  }
  if (attitudeChartInstance) {
    attitudeChartInstance.dispose()
    attitudeChartInstance = null
  }
  if (velocityComponentsChartInstance) {
    velocityComponentsChartInstance.dispose()
    velocityComponentsChartInstance = null
  }
}

// 在组件挂载时初始化图表
onMounted(() => {
  window.addEventListener('resize', () => {
    if (trajectoryChartInstance) trajectoryChartInstance.resize()
    if (heightChartInstance) heightChartInstance.resize()
    if (velocityChartInstance) velocityChartInstance.resize()
    if (headingChartInstance) headingChartInstance.resize()
    if (attitudeChartInstance) attitudeChartInstance.resize()
    if (velocityComponentsChartInstance) velocityComponentsChartInstance.resize()
  })
})
</script>

<style scoped>
.data-recognition-container {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #0c1124 0%, #182044 100%);
  color: #e0e0ff;
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px 0;
  background: rgba(16, 22, 58, 0.6);
  border-radius: 10px;
  border: 1px solid rgba(64, 92, 200, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.header h1 {
  font-size: 2.2rem;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.header p {
  font-size: 1.1rem;
  color: #a0a0e0;
  max-width: 600px;
  margin: 0 auto;
}

.control-panel {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.control-btn {
  font-weight: 600;
  padding: 12px 25px;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.control-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.control-btn:active {
  transform: translateY(1px);
}

.data-preview {
  background: rgba(20, 25, 60, 0.6);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  border: 1px solid rgba(64, 92, 200, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.data-preview h3 {
  margin-top: 0;
  color: #64b5f6;
  border-bottom: 1px solid rgba(100, 181, 246, 0.3);
  padding-bottom: 10px;
}

.preview-table {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
}

.preview-row {
  display: flex;
  margin-bottom: 10px;
  padding: 10px;
  background: rgba(30, 35, 70, 0.4);
  border-radius: 6px;
  border-left: 3px solid #4fc3f7;
}

.time-cell {
  min-width: 80px;
  color: #4fc3f7;
  font-weight: bold;
  margin-right: 15px;
}

.data-cell {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.data-key {
  color: #90caf9;
  font-weight: bold;
  margin-right: 5px;
}

.data-value {
  color: #e0e0ff;
}

.results-section {
  margin-top: 30px;
}

.chart-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-container {
  flex: 1;
  min-width: 300px;
  background: rgba(20, 25, 60, 0.6);
  border-radius: 10px;
  padding: 15px;
  border: 1px solid rgba(64, 92, 200, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.chart-container h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #64b5f6;
  font-size: 1.2rem;
}

.chart {
  height: 300px;
  width: 100%;
}

.stats-section {
  background: rgba(20, 25, 60, 0.6);
  border-radius: 10px;
  padding: 20px;
  margin-top: 30px;
  border: 1px solid rgba(64, 92, 200, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.stats-section h3 {
  margin-top: 0;
  color: #64b5f6;
  border-bottom: 1px solid rgba(100, 181, 246, 0.3);
  padding-bottom: 10px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.stat-card {
  background: rgba(30, 35, 70, 0.4);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(64, 92, 200, 0.3);
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  background: rgba(40, 45, 90, 0.5);
}

.stat-value {
  font-size: 2.5rem;
  font-weight: bold;
  color: #4fc3f7;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.stat-label {
  font-size: 1rem;
  color: #a0a0e0;
}

@media (max-width: 768px) {
  .chart-row {
    flex-direction: column;
  }

  .control-panel {
    flex-direction: column;
    align-items: center;
  }

  .control-btn {
    width: 100%;
    max-width: 300px;
  }
}

/* 新增的数据结构分析样式 */
.data-structure-section {
  background: rgba(20, 25, 60, 0.6);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  border: 1px solid rgba(64, 92, 200, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.data-structure-section h3 {
  margin-top: 0;
  color: #64b5f6;
  border-bottom: 1px solid rgba(100, 181, 246, 0.3);
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.structure-container {
  display: flex;
  gap: 20px;
}

.field-table {
  flex: 1;
  background: rgba(30, 35, 70, 0.4);
  border-radius: 8px;
  padding: 10px;
  border: 1px solid rgba(64, 92, 200, 0.3);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.raw-data {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.raw-data h4 {
  margin: 0 0 10px 0;
  color: #90caf9;
  font-size: 1rem;
}

.raw-textarea {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  background: rgba(15, 20, 45, 0.7);
  color: #e0e0ff;
  border: 1px solid rgba(100, 181, 246, 0.2);
  border-radius: 6px;
  padding: 10px;
}

/* 调整表格样式 */
:deep(.el-table) {
  background: transparent;
  color: #e0e0ff;
}

:deep(.el-table th) {
  background: rgba(40, 45, 90, 0.5);
  color: #64b5f6;
}

:deep(.el-table tr) {
  background: rgba(30, 35, 70, 0.3);
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
  background-color: rgba(64, 92, 200, 0.3) !important;
}

:deep(.el-table td) {
  border-bottom: 1px solid rgba(64, 92, 200, 0.2);
}

:deep(.el-table::before) {
  background-color: rgba(64, 92, 200, 0.2);
}

/* 响应式调整 */
@media (max-width: 992px) {
  .structure-container {
    flex-direction: column;
  }
}
</style>